/* Style for toasts created by window.toastRack */

/* shared styles - layout, not colour or positioning */

    .toast-rack {
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        position: relative;
    }

    .rtl .toast-rack {
        direction: rtl;
    }

    .toast-rack * {
        box-sizing: border-box;
    }

    .toast-rack.top {
        flex-direction: column-reverse;
        justify-content: end;
    }

    .toast-rack.start {
        flex-direction: row-reverse;
        justify-content: end;
    }

    .toast-rack.end {
        flex-direction: row;
    }

    .toast-rack .toast {
        align-items: center;
        display: flex;
        justify-content: space-between;
        margin: auto;
        opacity: 0;
        transition: opacity 100ms ease-in;
    }

    .toast-rack .toast .icon,
    .toast-rack .toast button {
        flex-grow: 0;
        flex-shrink: 0;
    }

    .toast-rack .toast button,
    .timeline-tooltip button {
        border: none;
        cursor: pointer;
        outline: none;
    }

    .toast-rack .toast button.close {
        align-items: center;
        background: none;
        display: flex;
        justify-content: center;
        flex-shrink: 0;
    }

    .toast-rack .toast .message {
        width: 100%;
    }

    .toast-rack .toast-slot {
        flex-grow: 0;
        flex-shrink: 0;
    }

    .toast-rack.top .toast-slot,
    .toast-rack.bottom .toast-slot {
        flex-grow: 0;
        flex-shrink: 0;
        height: 0;
        transition: height 100ms ease-in;
    }

    .toast-rack.start .toast-slot,
    .toast-rack.end .toast-slot {
        transition: width 100ms ease-in;
        width: 0;
    }

    .toast-rack .visible {
        opacity: 1;
        transition-delay: 100ms;
    }

    .toast-rack i {
        display: block;
        flex-grow: 0;
        flex-shrink: 0;
        --icon-size: 24px;
    }

    .toast-rack i.icon-settings {
        animation: rotate 2s linear infinite;
    }

    .toast-rack .toast-icon:not(:first-child) {
        margin-inline-start: 12px;
    }

    .toast-rack .toast-icon.red {
        --mask-color: var(--label-red);
    }

    .toast-rack .toast-icon.orange {
        --mask-color: var(--label-orange);
    }

    .toast-rack .toast-icon.yellow {
        --mask-color: var(--label-yellow);
    }

    .toast-rack .toast-icon.green {
        --mask-color: var(--label-green);
    }

    .toast-rack .toast-icon.blue {
        --mask-color: var(--label-blue);
    }

    .toast-rack .toast-icon.purple {
        --mask-color: var(--label-purple);
    }

    .toast-rack .toast-icon.grey {
        --mask-color: var(--label-grey);
    }

    .toast-rack .icon.upload {
        background-position: -86px -902px;
    }

/* end shared styles */

/* global-toast-container style */

    .global-toast-container {
        bottom: 0;
        display: flex;
        justify-content: center;
        padding: 4px;
        pointer-events: none;
        position: fixed;
        width: 100%;
        z-index: 2000;
    }

    .global-toast-container .toast-rack {
        pointer-events: initial;
    }

    .global-toast-container .toast-rack .toast {
        --min-toast-height: 64;
        --mask-color: var(--text-color-high);
        background: var(--surface-main);
        border-radius: 8px;
        box-shadow: var(--toast-shadow);
        color: var(--text-color-high);
        font-size: 14px;
        height: var(--toast-height);
        line-height: 20px;
        padding: 14px;
        width: 640px;
    }

    .global-toast-container .toast-slot {
        padding: 4px 0;
    }

    .global-toast-container .toast-rack.top .toast-slot.open,
    .global-toast-container .toast-rack.bottom .toast-slot.open {
        height: calc(var(--toast-height) + 8px);
    }

    .global-toast-container .toast-rack .toast .message {
        margin: 0 12px;
    }

    .global-toast-container .toast-rack .toast button,
    .timeline-tooltip button {
        background: var(--surface-grey-2);
        border-radius: 4px;
        color: var(--text-color-high);
        height: 36px;
    }

    .global-toast-container .toast-rack .toast button:not(:last-child) {
        margin-inline-end: 8px;
    }

    .global-toast-container .toast-rack .toast button.action {
        padding: 8px 12px;
    }

    .global-toast-container .toast button.close {
        height: 36px;
        padding: 0;
        width: 36px;
    }

    .global-toast-container .toast span.link-text {
        font: var(--text-body2);
        color: var(--text-color-medium);
        margin-left: 12px;
    }

/* end global-toast-container style */

/* alert-toast-container style */

/* alert-toast-container style */

    .alert-toast-container {
        position: relative;
        margin-bottom: 8px;
    }

    .alert-toast-container .toast-rack .toast {
        --min-toast-height: 48;
        background: var(--surface-main);
        border-radius: 8px;
        box-shadow: var(--toast-shadow);
        color: var(--text-color-high);
        font: var(--text-body1);
        height: 48px;
        max-width: 512px;
        min-width: 200px;
        padding: 8px;
        --mask-color: var(--text-color-high);
    }

    .alert-toast-container .toast-rack.top .toast,
    .alert-toast-container .toast-rack.bottom .toast {
        height: var(--toast-height);
    }

    .alert-toast-container .toast-rack.start .toast,
    .alert-toast-container .toast-rack.end .toast {
        height: 48px;
        margin: 0 16px;
        width: 48px;
    }

    .alert-toast-container .toast-rack .toast button {
        background: var(--surface-grey-2);
        color: var(--text-color-high);
        border-radius: 4px;
    }

    .alert-toast-container .toast-rack .toast button.action {
        font: var(--text-body1);
        padding: 0 12px;
        height: 24px;
    }

    .alert-toast-container .toast-rack .toast button.close {
        padding: 0;
        margin-inline-start: 8px;
    }

    .alert-toast-container .toast-rack .toast .message {
        margin: 0 12px;
    }

    .alert-toast-container .toast-rack.top .toast-slot {
        width: intrinsic;       /* safari < 11 */
        width: -moz-max-content;    /* FF < 66 */
        width: max-content;
    }

    .alert-toast-container .toast-rack.top .toast-slot,
    .alert-toast-container .toast-rack.bottom .toast-slot {
        padding: 8px 0;
    }

    .alert-toast-container .toast-rack.top .toast-slot.open,
    .alert-toast-container .toast-rack.bottom .toast-slot.open {
        height: calc(var(--toast-height) + 8px);
    }

    .alert-toast-container .toast-rack.start .toast-slot,
    .alert-toast-container .toast-rack.end .toast-slot {
        padding: 0 8px;
    }

    .alert-toast-container .toast-rack.start .toast-slot.open,
    .alert-toast-container .toast-rack.end .toast-slot.open {
        width: 58px;
    }

    .alert-toast-container .toast-rack .toast-slot.high .toast {
        background-color: var(--label-red);
    }

    .alert-toast-container .toast-rack .toast-slot.medium .toast {
        background-color: var(--label-orange);
    }

    .alert-toast-container .toast-rack .toast-slot.low .toast {
        background-color: var(--label-green);
    }

    .alert-toast-container .toast-rack .toast-slot.high .toast,
    .alert-toast-container .toast-rack .toast-slot.medium .toast,
    .alert-toast-container .toast-rack .toast-slot.low .toast {
        border: none;
        color: #fff;
        --mask-color: #fff;
    }

    .alert-toast-container .toast-rack .toast-slot.high .close,
    .alert-toast-container .toast-rack .toast-slot.medium .close,
    .alert-toast-container .toast-rack .toast-slot.low .close {
        background-color: transparent;
    }

/* end alert-toast-container style */
